<template>
	<view>
		<u-cell-group>
			<u-cell title="头像">
				<view style="height: 80rpx;" slot="value" class="u-slot-value" @click="upload">
					<u-avatar :src="baseUrl + user.avatar" shape="square"></u-avatar>
				</view>
			</u-cell>
			<u-cell title="背景图">
				<view style="height: 80rpx;" slot="value" class="u-slot-value" @click="uploadBackground">
					<u-avatar :src="baseUrl + user.background_image" shape="square"></u-avatar>
				</view>
			</u-cell>
			<u-cell title=" ">
				<view style="height: 80rpx;width: 100%;display: flex;align-items: center;" slot="value" class="u-slot-value">
					<text style="margin-right: 10rpx;">账户:</text>
					<text >{{user.username}}</text>
				</view>
			</u-cell>
			<u-cell title=" ">
				<view style="height: 80rpx;width: 100%;display: flex;align-items: center;" slot="value" class="u-slot-value">
					<text style="margin-right: 10rpx;">昵称:</text>
				 <u--input
				    placeholder="请输入内容"
					border="none"
				    v-model="user.nickname"
				  ></u--input>
				</view>
			</u-cell>
		</u-cell-group>
		<view class="" style="position: fixed;left: 0;bottom: 20rpx;width: 100%;">
			<view class="" style="margin: 0 20rpx;">
				<u-button type="primary" @click="submit" text="提交"></u-button>
			</view>
		
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					username: '',
					nickname: '',
					avatar: '',
					background_image:''
				},
			}
		},
		onLoad() {
			this.user = {
				username: this.userInfo.username,
				nickname: this.userInfo.nickname,
				avatar: this.userInfo.avatar,
				background_image:this.userInfo.background_image,
			}
		},
		methods: {
			
			submit(){
				if(!this.user.nickname){
					return this.$u.toast('昵称不能为空');
				}
				this.$api.user.profile(this.user).then(res => {
					if (res.code == 1) {
						let userInfo = res.data.userinfo;
						let token = userInfo.token
						this.$u.vuex('token', token)
						this.$u.vuex('userInfo', userInfo)
						this.$u.toast('修改成功');
					}
				
				})
			},
			upload() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.baseUrl + '/api/common/upload', // 你的上传接口地址
							filePath: tempFilePaths[0],
							header: {
								token: this.token
							},
							name: 'file', // 这里根据后端需要的字段来定义
							formData: {
								'user': 'test' // 其他要传的参数
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								if (data.code == 1) {
									this.user.avatar = data.data.url;
									this.$u.toast(data.msg)
								} else {
									this.$u.toast(data.msg)
								}
								// 处理上传成功的结果
							},
							fail: (uploadFileErr) => {
								// 处理上传失败的情况
							}
						});
					}
				});
			},
			uploadBackground() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.baseUrl + '/api/common/upload', // 你的上传接口地址
							filePath: tempFilePaths[0],
							header: {
								token: this.token
							},
							name: 'file', // 这里根据后端需要的字段来定义
							formData: {
								'user': 'test' // 其他要传的参数
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								if (data.code == 1) {
									this.user.background_image = data.data.url;
									this.$u.toast(data.msg)
								} else {
									this.$u.toast(data.msg)
								}
								console.log(this.user);
								// 处理上传成功的结果
							},
							fail: (uploadFileErr) => {
								// 处理上传失败的情况
							}
						});
					}
				});
			},
		}
	}
</script>

<style>

</style>
